<template>
	<div class="hello">
		<div id="app" style="width: 100%">
			<!-- 日期 -->
			<el-date-picker v-model="date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
			<!-- 名字 -->
			<el-input size="small" style="width:100px" v-model="name" placeholder="请输入姓名"></el-input>
			<!-- 班级 -->
			<el-input size="small" style="width:100px" v-model="oclass" placeholder="请输入班级"></el-input>
			<!-- 新增 -->
			<el-button size="small" type="primary" @click="App()">新增</el-button>
			<el-table :data="xj.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%" max-height="450">
				<el-table-column prop="date" label="日期" width="180" align='center'>
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="180" align='center'>
				</el-table-column>
				<el-table-column prop="class" label="班级" align='center'>
				</el-table-column>
				<el-table-column label="性别" width="150" align='center' prop="sex">
					<template slot-scope="scope">
						<span v-if="scope.row.sex == '0'">女</span>
						<span v-else>男</span>
					</template>
				</el-table-column>
				<el-table-column prop="discipline" label="处分记录" align='center'>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100" align='center'>
					<template slot-scope="scope">
						<!-- scope.$index：传入当前index  scope.row:传入当前数据 -->
						<el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button @click.native.prevent="deleteRow(scope.$index,xj)" type="text" size="small">
							移除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-dialog title="编辑数据" :visible.sync="editFormVisible" :close-on-click-modal="false" class="edit-form">
				<el-form :model="editForm" label-width="80px" ref="editForm">
					<el-form-item label="日期" prop="date">
						<el-input v-model="editForm.date"></el-input>
					</el-form-item>
					<el-form-item label="姓名" prop="name">
						<el-input v-model="editForm.name"></el-input>
					</el-form-item>
					<el-form-item label="班级" prop="class">
						<el-input v-model="editForm.class"></el-input>
					</el-form-item>
					<el-form-item label="性别" prop="sex">
						<el-radio-group v-model="editForm.sex">
							<el-radio label="1">男</el-radio>
							<el-radio label="0">女</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="处分记录" prop="discipline">
						<el-input v-model="editForm.discipline"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="handleCancel('editForm')">取消</el-button>
					<el-button type="primary" @click.native="handleUpdate('editForm')">更新</el-button>
				</div>
			</el-dialog>
			<br>
		</div>
	<!-- 分页器 -->
	<div class="tb">
	  <el-pagination 
	  background 
	  @size-change="handleSizeChange" 
	  @current-change="handleCurrentChange"
	  layout="prev,pager, next" 
	  :total="xj.length">
	  </el-pagination>
	</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				Index:'',
				xj: [],
				date:'',
				name:'',
				oclass:'',
				//编辑界面数据
				//分页参数
				total: this.total,
				currentPage: 1, //当前页数
				pageSize: 10, //每页显示条数
				editForm: {
					date: '',
					name: '',
					class: '',
					sex: '',
					discipline: '',
				},
				//定义属性
				// name: undefined,
				// date: undefined,
				// cLass: undefined,
				//默认dialog弹窗不打开（true打开，false为不打开）
				editFormVisible: false,
			}
		},
		methods: {
			//新增数据方法
			App: function() {
				this.xj.push({
					date: this.date,
					name: this.name,
					class: this.oclass,
					
				});
				console.log(oclass);
			},
			handleSizeChange(val) {
			  this.pageSize = val
			  this.currentPage = 1
			  // console.log(`每页 ${val} 条`)
			},
			handleCurrentChange(val) {
			  this.currentPage = val
			  console.log(`当前页: ${val}`);
			},
			//删除当前行数据
			deleteRow(index, rows) {
				var newPage = index + (this.currentPage - 1)*this.pageSize
				rows.splice(newPage, 1);
			},
			//编辑
			handleEdit(index, row) {
				this.Index = index; //传递当前index
				this.editFormVisible = true; //dialog对话窗口打开
				this.editForm = Object.assign({}, row); //将数据传入dialog页面
			},
			//取消
			handleCancel(formName) {
				this.editFormVisible = false;
			},
			//更新
			handleUpdate(formName) {
				//dialog页面数据写入到tableData页面上
				//this.$set(tableName,talbeIndex,data)
				this.$set(this.xj, this.editForm.index, {
					date: this.editForm.date,
					name: this.editForm.name,
					class: this.editForm.class,
					sex: this.editForm.sex,
					discipline: this.editForm.discipline
				});
				this.xj[this.Index] = this.editForm;
				this.editFormVisible = false;
			},
			getdata(){
				this.mysqlser({
					methods:'get',
					url:'/allstudents',
					params:{}
				}).then((res)=>{
					this.xj=[...res.data]
					console.log(res.data[0])
				})
			}
		},
		mounted() {
			this.getdata()
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1,
  h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
